<template>
  <view style="padding: 0 30rpx">
    <u-sticky :offset-top="0">
      <view style="padding: 20rpx 0;background-color: white">
        <u-search v-model="keyword" shape="round"
                  placeholder="搜索大学名称"
                  :action-style="{color: '#f63075'}"
                  @clear="this.showSchoolList = true"
                  @search="searchSchool"
                  @custom="searchSchool"
                  @change="change"></u-search>
      </view>
    </u-sticky>
    <view style="padding: 0 30rpx ">
      <view @click="hideSchool" style="padding: 30rpx 0">暂不设置</view>
    </view>
    <u-line></u-line>
    <view class="u-page" style="padding-top: 20rpx">
<!--      附近的学校-->
      <view v-if="showNear" style="padding: 20rpx 0;display: flex;align-items: center ">
        <text style="color:rgba(84,87,87,0.5);font-size: 14px">离我最近</text>
        &nbsp;<u-icon color="#30dbf6" name="map"></u-icon>
      </view>
      <u-loading-icon v-else text="加载中" textSize="18"></u-loading-icon>
      <view
            v-for="(item, index) in nearSchool"
            :key="index">
          <u-cell @click="alterFrontUserSchool(item)" :border="false" :title="item"></u-cell>
        </view>
    </view>
    <view style="padding: 20rpx">
      <u-line></u-line>
    </view>

    <view class="u-page" v-if="showSchoolList">
      <u-list @scrolltolower="scrolltolower">
        <u-list-item
            v-for="(item, index) in schoolList.records"
            :key="index">
          <u-cell @click="alterFrontUserSchool(item.schoolName)" :border="false" :title="item.schoolName"></u-cell>
        </u-list-item>
      </u-list>
    </view>
    <view class="u-page" v-else>
      <u-list >
        <u-list-item
            v-for="(item, index) in searchSchoolList"
            :key="index">
          <u-cell @click="alterFrontUserSchool(item.schoolName)" :border="false" :title="item.schoolName"></u-cell>
        </u-list-item>
      </u-list>
    </view>

  </view>
</template>

<script>
import {getNearSchool, getSchoolList, searchSchool} from "@/api/school";
import amap from "@/components/amap-wx.130";
import {alterFrontUserSchool} from "@/api/user";

export default {
  data() {
    return {
      showSchoolList:true,
      keyword: '',
      showNear: false,
      nearSchool: [],
      schoolList: {},
      searchSchoolList:[],
      map: {
        longitude: 0,
        latitude: 0,
        province: ''
      },
      current: 1,
      pageSize: 20,
      key: '1518052a103b8a86a3fb4b69f7eb9c2a', //高德小程序key
    };
  },
  onLoad() {
    this.amapPlugin = new amap.AMapWX({
      key: this.key
    });
    this.getSchoolList()
    this.getNearSchool()
  },
  methods: {
    hideSchool(){
      this.alterFrontUserSchool('')
    },
    async alterFrontUserSchool(school){
      const res = await alterFrontUserSchool(school)
      if(res.code == 200){
        uni.$emit("alterUserInfo",{success: true})
        setTimeout(()=>{
          uni.navigateBack({
            delta: 1
          })
      },500)
      }else{
        uni.showToast({
          title: '设置失败',
          duration: 2000,
          icon: 'none'
        });
      }
    },
    getNearSchool() {
      let _this = this
      uni.getLocation({
        type: 'gcj02',
        success: function (res) {
          // console.log('获取定位111', res);
          // console.log('当前位置的经度：' + res.longitude);
          // console.log('当前位置的纬度：' + res.latitude);
          _this.map.longitude = res.longitude
          _this.map.latitude = res.latitude
        }
      });
      this.amapPlugin.getRegeo({
        success: (data) => {
          // console.log('高德地图', data)
          _this.map.province = data[0].regeocodeData.addressComponent.province
          if (_this.map?.province !== undefined &&
              _this.map?.longitude !== undefined &&
              _this.map?.latitude !== undefined) {
            getNearSchool(_this.map).then(res => {
              if (res.code == 200) {
                res.data.forEach(item => {
                   item.replace(/^\"+|\"+$/g, '"')
                })
                _this.nearSchool = res.data
                _this.showNear = true
              } else {
                uni.showToast({
                  title: res.msg,
                  duration: 2000,
                  icon: 'none'
                });
              }
            })
          }
        },
        fail: function (err) {
          console.log('获取位置失败', err)
          uni.showToast({
            title: '获取位置失败',
            duration: 2000,
            icon: 'error'
          });
        }

      })
    },
    async getSchoolList() {
      const res = await getSchoolList(this.current, this.pageSize)

      this.schoolList = res.data
    },
    async searchSchool() {
      if(this.keyword.trim() == '' || this.keyword.length == 0){
        uni.showToast({
          title: '请输学校名称',
          duration: 2000,
          icon: 'none'
        });
        this.showSchoolList = true
        return
      }
      const res = await searchSchool(this.keyword)
      this.searchSchoolList = res.data
      this.showSchoolList = false
    },
    async scrolltolower() {
      if (this.schoolList.total <= this.schoolList.records.length) {
        uni.showToast({
          title: '没有更多数据了',
          duration: 2000,
          icon: 'none'
        });
        return
      }
      this.current++
      const res = await getSchoolList(this.current, this.pageSize)
      this.schoolList.records = this.schoolList.records.concat(res.data.records)
    },
    change(value){
      if(this.keyword == '' || this.keyword.length == 0){
        this.showSchoolList = true
      }
    }

  }
}
</script>

<style lang="scss">

</style>
